<script setup>
</script>

<template>
<header>
  <div id="g"><slot name="default" /></div>
</header>
</template>

<style scoped>
#g {
  color:white;
  padding:10px;
  background-color: #34495e;
  animation: tipTest .5s ease;
  display: inline-block;
  border-radius: 1.5em;
  transition:2s;
}
@keyframes tipTest{
  from {
    transform: translateX(5px);
  }
  20%{
    transform: translateX(-5px);
  }
  50%{
    transform: translateX(5px);
  }
  100%{
    transform: translateX(-5px);
  }
}
#g:hover{
background-color: #8c7ae6;
}
header{
  perspective: 800px;
}
</style>
